<template>
	<div>
		<el-row :gutter="20" class="listCard" style="margin-top: 20px;">
			<el-col :span="16" style="height:270px">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<div class="HederLeft">
							<div class="teltie"></div>
							<span>经营概况</span>
						</div>


						<div style="line-height:0;" v-show="$store.state.zangw == '1'">བདག་གཉེར་གནས་ཚུལ་མདོར་བསྡུས་</div>
						<!--<router-link to=""><el-button style="float: right; padding: 3px 0" type="text">更多</el-button></router-link>-->
					</div>
					<el-row class="demo-color-box">
						<el-col :span="7">
							<!--<img width="40" src="../../assets/img/home-icon01.png" />icon001_liebiao-->
							<div class="iconDiv">
								<img src="../../assets/img/in1.png" style="width:35px;height:35px" alt="">
								<!-- <i class="iconfont icon001_liebiao iconClass"></i> -->
							</div>
						</el-col>
						<el-col :span="14">
							<div>
								<span>赋码数量</span>
								<div style="line-height:0;" v-show="$store.state.zangw == '1'">ཨང་སྤྲད་གྲངས་འབོར་</div>
								<p>{{ data1.fuCodeNum }}</p>
							</div>
						</el-col>
					</el-row>
					<el-row class="demo-color-box">
						<el-col :span="7">
							<!--<img width="40" src="../../assets/img/home-icon02.png"icon001_xiangqingye />-->
							<div>
								<img src="../../assets/img/in2.png" style="width:35px;height:35px" alt="">
								<!-- <i class="iconfont icon001_xiangqingye iconClass"></i> -->
							</div>
						</el-col>
						<el-col :span="14">
							<div>
								<span>扫码数量</span>
								<div style="line-height:0;" v-show="$store.state.zangw == '1'">བཤེར་ཨང་གྲངས་ཚད།</div>
								<p>{{ data1.scanCode }}</p>
							</div>
						</el-col>
					</el-row>
					<el-row class="demo-color-box">
						<el-col :span="7">
							<!--<img width="40" src="../../assets/img/home-icon02.png"icon001_wenjian />-->
							<div>
								<img src="../../assets/img/in3.png" style="width:35px;height:35px" alt="">
								<!-- <i class="iconfont icon001_wenjian iconClass"></i> -->
							</div>
						</el-col>
						<el-col :span="16">
							<div>
								<span>田间操作次数</span>
								<div style="line-height:0;" v-show="$store.state.zangw == '1'">ཞིང་ནང་བཀོལ་སྤྱོད་ཐེངས་གྲངས་
								</div>
								<p>{{ data3.fieldCZNum }}次</p>
							</div>
						</el-col>
					</el-row>
					<el-row class="demo-color-box">
						<el-col :span="7">
							<!--<img width="40" src="../../assets/img/home-icon02.png" /icon001_tupian>-->
							<div>
								<img src="../../assets/img/in4.png" style="width:35px;height:35px" alt="">
								<!-- <i class="iconfont icon001_tupian iconClass" style="font-size:40px;"></i> -->
							</div>
						</el-col>
						<el-col :span="14">
							<div>
								<span>采收数量</span>
								<div style="line-height:0;" v-show="$store.state.zangw == '1'">འཚོལ་བསྡུའི་གྲངས་ཚད་་</div>
								<p>{{ data3.purchaseNum }}kg</p>
							</div>
						</el-col>
					</el-row>
					<el-row class="demo-color-box">
						<el-col :span="7">
							<!--<img width="40" src="../../assets/img/home-icon02.png" icon001_rili/>-->
							<div>
								<img src="../../assets/img/in5.png" style="width:35px;height:35px" alt="">
								<!-- <i class="iconfont icon001_rili iconClass"></i> -->
							</div>
						</el-col>
						<el-col :span="14">
							<div>
								<span>种植面积</span>
								<div style="line-height:0;" v-show="$store.state.zangw == '1'">འདེབས་ཁྱོན་</div>
								<p>{{ data3.plantAreaNum }}亩</p>
							</div>
						</el-col>
					</el-row>
					<el-row class="demo-color-box">
						<el-col :span="7">
							<!--<img width="40" src="../../assets/img/home-icon02.png" icon001_dizhi/>-->
							<div style="">
								<img src="../../assets/img/in6.png" style="width:35px;height:35px" alt="">
								<!-- <i class="iconfont icon001_dizhi iconClass"></i> -->
							</div>
						</el-col>
						<el-col :span="14">
							<div>
								<span>地块数量</span>
								<div style="line-height:0;" v-show="$store.state.zangw == '1'">ས་ཞིང་གི་གྲངས་ཚད་</div>
								<!-- <p>{{statisics.user}}</p> -->
								<p>{{ data1.areaNumCount }}块</p>
							</div>

						</el-col>
					</el-row>
					<el-row class="demo-color-box">
						<el-col :span="7">
							<!--<img width="40" src="../../assets/img/home-icon02.png" icon001_tongji/>-->
							<div style="">
								<img src="../../assets/img/in7.png" style="width:35px;height:35px" alt="">
								<!-- <i class="iconfont icon001_tongji iconClass" style="margin-left:2px;"></i> -->
							</div>
						</el-col>
						<el-col :span="14">


							<div>
								<span>休耕地块</span>
								<div style="line-height:0;" v-show="$store.state.zangw == '1'">
									ཞིང་ཁ་འདེབས་འཇོག་རེས་མོས་བྱེད་པ་</div>
								<p>{{ data3.xgDKSum }}块</p>
							</div>

						</el-col>
					</el-row>
					<el-row class="demo-color-box">
						<el-col :span="7">
							<!--<img width="40" src="../../assets/img/home-icon02.png"icon001_wode/>-->
							<div>
								<img src="../../assets/img/in8.png" style="width:35px;height:35px" alt="">
								<!-- <i class="iconfont icon001_wode iconClass"></i> -->
							</div>
						</el-col>
						<el-col :span="14">
							<div>
								<span>员工数量</span>
								<div style="line-height:0;" v-show="$store.state.zangw == '1'">ལས་མིའི་གྲངས་ཚད་</div>
								<p>{{ data2.data }}人</p>
							</div>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="8" style="height:270px">
				<el-card class="box-card">
					<div slot="header" class="clearfix" style="position: relative">
						<div class="HederLeft">
							<div class="teltie"></div>
							<span>消息中心</span>
						</div>
						<div style="line-height:0;" v-show="$store.state.zangw == '1'">བརྡ་འཕྲིན་ལྟེ་གནས།</div>
						<router-link to="/message"><el-button style="position: absolute;right: 3px;top: 0"
								type="text">更多</el-button></router-link>
						<div style="position: absolute;right: 3px;top: 15px" v-show="$store.state.zangw == '1'">དེ་བས་མང་བ་
						</div>
					</div>

					<div v-for="(o, index) in messageList" :key="index" class="text item">
						<span style="height: 30px; overflow:hidden; width:75%; display:inline-block;">{{ o.content }}</span>
						<font>{{ o.createTime }}</font>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="20" class="listCard">
			<el-col :span="16">
				<el-card class="box-card">
					<div slot="header" class="clearfix" style="position: relative">
						<div class="HederLeft">
							<div class="teltie"></div>
							<span>地块信息</span>
						</div>
						<div v-show="$store.state.zangw == '1'">ས་དུམ་ཆ་འཕྲིན།</div>
						<router-link to="/base"><el-button style="position: absolute;right: 3px;top: 0"
								type="text">更多</el-button></router-link>
						<div style="position: absolute;right: 3px;top: 20px" v-show="$store.state.zangw == '1'">དེ་བས་མང་བ་
						</div>

					</div>
					<div style="width:100%;">
						<div style="width:35%;height: 100px; padding: 20px;position: relative;display:inline-block;"
							v-if="listdata.length > 0">
							<img :src="listdata[0].img" style="width:100px; height:100px;display:inline-block;" alt="">
							<div style="display:inline-block; position: absolute; top:20px; left:140px;">
								<h4>{{ listdata[0].name }}</h4>
								<div style="font-size:12px;margin-top:10px;">
									<span>
										<i class="iconfont icon001_wode iconclass1"
											style="margin-left:2px;"></i>{{ listdata[0].principal_name }}
									</span>
									<span style="float: right;">
										<i class="iconfont iconshouji iconclass1" style="margin-left:2px;"></i>

										{{ listdata[0].phone }}
									</span>
								</div>
								<div style="font-size:12px;margin-top:10px;">
									已使用：{{ listdata[0].plantAreaSum }}亩/{{ listdata[0].bsAreaSum }}亩</div>
							</div>
						</div>

						<div style="width:35%;height: 100px; padding: 20px;position: relative;display:inline-block;margin-left:30px;"
							v-if="listdata.length > 1">
							<img :src="listdata[0].img" style="width:100px; height:100px;display:inline-block;" alt="">
							<div style="display:inline-block; position: absolute; top:20px; left:140px;">
								<h4>{{ listdata[1].name }}</h4>
								<div style="font-size:12px;margin-top:10px;">
									<span>
										<i class="iconfont icon001_wode iconclass1"
											style="margin-left:2px;"></i>{{ listdata[1].principal_name }}
									</span>
									<span style="float: right;">
										<i class="iconfont iconshouji iconclass1" style="margin-left:2px;"></i>
										{{ listdata[1].phone }}
									</span>
								</div>
								<div style="font-size:12px;margin-top:10px;">
									已使用：{{ listdata[1].plantAreaSum }}亩/{{ listdata[1].bsAreaSum }}亩</div>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="8">
				<el-card class="box-card">
					<div class="HederLeft">
						<div class="teltie"></div>
						<span>使用指南</span>
					</div>

					<div v-show="$store.state.zangw == '1'">བཀོལ་སྤྱོད་ཕྱོགས་སྟོན་</div>
					<div style="display:flex;align-items: center;justify-content: space-between;width:100%;margin-top:40px">
						<div class="syzl" style="margin-top:15px;" @click="open">
							<img style="width:30px;height:30px;margin-right:10px" src="../../assets/img/sc1.png" alt="">
							种植平台用户使用手册
						</div>

						<div style="width: 126px;
height: 48px;
background: #409EFF;
margin-top:15px;
border-radius: 0px 8px 8px 0px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
border: 1px solid #409eff;
">
							<el-button type="primary" @click="download" round>点击下载</el-button>
						</div>

					</div>
					<div style="margin-left:30px;" v-show="$store.state.zangw == '1'">
						འདེབས་འཛུགས་ལས་སྟེགས་སྤྱོད་མཁན་གྱི་བེད་སྤྱོད་ལག་དེབ་</div>
				</el-card>
				<!-- <el-card class="box-card" style="margin-top:20px;height:100px;padding:0;">

					<div style="100%">
						<img :src="img" alt="" :span="8" style="height:80px;width:100%;"	>
					</div>

				</el-card> -->
			</el-col>
		</el-row>
		<el-row :gutter="20" class="listCard">
			<el-col :span="8">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<div class="HederLeft">
							<div class="teltie"></div>
							<span>扫码分布</span>
							<div v-show="$store.state.zangw == '1'">བཤེར་ཨང་ཁྱབ་ཚུལ།</div>
						</div>

						<div id="mapData" style="width:100%;height:200px;"></div>
						<!-- <router-link to=""><el-button style="float: right; padding: 3px 0" type="text">更多</el-button></router-link> -->
					</div>
				</el-card>
			</el-col>
			<el-col :span="16">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<div class="HederLeft">
							<div class="teltie"></div>
							<span>扫码统计</span>
							<div v-show="$store.state.zangw == '1'">བཤེར་ཨང་སྡོམ་རྩིས།</div>
						</div>

						<div id="codeStatistics" style="width:100%;height:200px;"></div>
					</div>
				</el-card>

			</el-col>
		</el-row>
	</div>
</template>

<script>
import axios from "axios"
import * as echarts from 'echarts';
import chinas from '../common/100000.json'
import { plant_box_codeCount, plant_user_userNum, plant_farm_fieldCZCount } from "@/request/api"
export default {
	data() {
		return {
			id: '',
			ids: '',
			data1: {},
			data2: {},
			data3: {},
			scanCodeData: {},
			monthData: [],
			listdata: [],
			mapData: [],
			messageList: [{
				content: '这是一条消息',
				createTime: '2022-08-10'
			}],
		}
	},
	mounted() {
		// if (location.href.indexOf("#reloaded") == -1) {
		//     location.href = location.href + "#reloaded";
		//     location.reload();
		// }
		this.id = localStorage.getItem("companyId")
		this.ids = this.id
		this.getuser()
		this.getFarmfieldCZCount()
		this.init()

		this.getcode()
		this.getbase()
		this.getadvert()
		// this.getfallow()

		var myCity = new BMap.LocalCity();
		myCity.get(function myFun(result) {
			var cityName = result.name;
			localStorage.setItem('cityCoordinate', JSON.stringify(result.center))
		});

	},
	methods: {
		getadvert() {

			axios.get("http://47.108.220.160:90/jcApi/plant/control/advert/getByCompanyId/" + this.ids).then((res) => {
				// axios.get("http://47.108.220.160:90/jcApi/plant/control/advert/getByCompanyId/"+this.ids).then((res)=>{
				// this.data3 = res.data.data
				this.img = "http://47.108.220.160:90/jcApi/plant/file/show/" + res.data.data.img
			})
		},

		open() {
			window.open("https://grove.cpzsyun.com:81/re/种植平台用户使用手册.pdf")
		},
		// getfallow(){
		// 	// axios.post("http://47.108.220.160:90/jcApi/plant/farm/fieldCZCountxgDKSum",this.ids).then((res)=>{
		// 	// 	// this.listdata = res.data.data
		// 	// })
		// 	let data = {
		// 		companyId:this.ids
		// 	}
		// 	axios.post("http://47.108.220.160:90/jcApi/plant/farm/fieldCZCount",data).then((res)=>{
		// 		// this.listdata = res.data.data
		// 	})
		// },
		getbase() {
			let data = {
				companyId: this.ids
			}
			axios.post("http://47.108.220.160:90/jcApi/plant/basesoil/userAndBaseSoil", data).then((res) => {
				this.listdata = res.data.data
				var coorList = []
				let arr = []
				let arr1 = []
				// for(var s =0;s<this.listdata.length;s++){
				// 	this.listdata[s].plantAreaSum = this.listdata[s].plantAreaSum.toFixed(2)
				// 	this.listdata[s].bsAreaSum = this.listdata[s].bsAreaSum.toFixed(2)
				// }
				if (this.listdata.length > 0) {
					coorList = JSON.parse(this.listdata[0].coordinate)

					var center = coorList[0].lng + "," + coorList[0].lat

					var newS = ""
					for (let i = 0; i < coorList.length; i++) {
						newS = coorList[i].lng + ',' + coorList[i].lat
						arr.push(newS);
					}
					var s = arr.join(";")

					this.listdata[0].img = " http://api.tianditu.gov.cn/staticimage?center= " + center + "&zoom=15&layers=img_c,cva_c,cta_c&paths= " + s + "&pathStyles=0x0000ff,4,0.5,0xff0000&tk=41252f44578a99fda1a999538d537df3"
				}

				if (this.listdata.length > 1) {
					coorList = JSON.parse(this.listdata[1].coordinate)
					var center = coorList[1].lng + "," + coorList[1].lat
					var newS = ""
					for (let i = 0; i < coorList.length; i++) {
						newS = coorList[i].lng + ',' + coorList[i].lat
						arr.push(newS);
					}
					var ww = arr.join(";")

					this.listdata[1].img = " http://api.tianditu.gov.cn/staticimage?center= " + center + "&zoom=15&layers=img_c,cva_c,cta_c&paths= " + ww + "&pathStyles=0x0000ff,4,0.5,0xff0000&tk=41252f44578a99fda1a999538d537df3"
				}
				// console.log(this.listdata)
			})
			// axios.post("http://47.108.220.160:90/jcApi/plant/basesoil/userAndBaseSoil",this.ids).then((res)=>{
			// 	this.listdata = res.data.data
			// 	let arr = []
			// 	let arr1 = []
			// 	if(this.listdata.length > 0) {
			// 		arr = this.listdata[0].coor
			// 	}
			// })
		},
		//打码统计
		getcode() {
			var date = new Date();
			let month = date.getMonth() + 1
			let i = month
			for (i; i > 0; i--) {
				this.monthData.push(i + '月')
			}

			let j = 12
			let k = month
			for (j; j > k; j--) {
				this.monthData.push(j + '月')
			}
			this.monthData = this.monthData.reverse()
			axios.post("http://47.108.220.160:90/jcApi/plant/traceinfo/uniqueId").then((res) => {
				// console.log(res.reverse());
				let resDatas = res.data.data
				this.scanCodeData = resDatas.reverse()
				let myEchart = echarts.init(document.getElementById("codeStatistics"));
				let option = {
					title: {
						text: "扫码量",
						textStyle: {
							color: ['white'],
							fontSize: 14,
						},
						top: 10
					},
					// tooltip:{},
					// legend:{},
					xAxis: {
						data: this.monthData,
						axisLabel: {
							color: ['black'],
							fontSize: 10,
							interval: 0
						}
					},
					yAxis: {
						axisLabel: {
							color: ['black'],
							fontSize: 10,
						}
					},
					grid: {
						top: 30,
						width: "auto",
						height: "70%"
					},
					series: [{
						name: '扫码量',
						type: "bar",
						data: this.scanCodeData,
						// data:[10,33,54,42,26,15,52,48,25,26,42,25],
						label: {
							show: true,
							position: 'top',
							textStyle: {
								color: '#555'
							}
						},
					}]
				};
				myEchart.setOption(option);

			})
		},
		getuser() {
			let data = {
				companyId: this.ids
			}
			axios.post("http://47.108.220.160:90/jcApi/plant/user/userNum", data).then((res) => {
				this.data2 = res.data.data
			})
		},
		getFarmfieldCZCount() {
			let data = {
				companyId: this.ids
			}
			// axios.post("http://47.108.220.160:90/jcApi/plant/farm/fieldCZCount",data).then((res)=>{
			axios.post("http://47.108.220.160:90/jcApi/plant/farm/fieldCZCount", data).then((res) => {
				this.data3 = res.data.data
			})

		},
		//下载使用指南
		download() {
			window.location.href = "https://grove.cpzsyun.com:81/re/种植平台用户使用手册.pdf"
		},
		init() {
			let data = {
				companyId: this.ids
			}
			// axios.post("http://47.108.220.160:90/jcApi/plant/box/codeCount",data).then((res)=>{
			axios.post("http://47.108.220.160:90/jcApi/plant/box/codeCount", data).then((res) => {
				this.data1 = res.data.data
				var abc = this.data1.scanCodeAddress
				var keys = [];
				var values = [];
				var obj = abc
				for (var key in obj) {
					keys.push(key);
					values.push(obj[key]);
				}
				for (var a = 0; a < keys.length; a++) {
					var object = {}
					object.name = keys[a]
					object.value = values[a]
					this.mapData.push(object)
				}
				// console.log(this.mapData)
				let myEchartsss = echarts.init(document.getElementById("mapData"));
				var mapName = "china"
				echarts.registerMap(mapName, chinas);
				let option = {
					tooltip: {
						triggerOn: "click",
						formatter: function (e, t, n) {
							if (e.value) {
								return .5 == e.value ? e.name + "：扫码量" : e.seriesName + "<br />" + e.name + "：" + e.value
							} else {
								return .5 == e.value ? e.name + "：扫码量" : e.seriesName + "<br />" + e.name + "：" + 0
							}
						}
					},
					visualMap: {
						min: 0,
						max: 1000,
						right: 5,
						bottom: 10,
						itemWidth: 20,
						itemHeight: 10,
						showLabel: !0,
						textStyle: {
							color: "#1E1E1E",
							fontSize: 10
						},
						// text: ["高", "低"],
						pieces: [{
							gt: 100,
							label: "> 100 ",
							color: "#7f1100"
						}, {
							gte: 10,
							lte: 100,
							label: "10 - 100 ",
							color: "#ff5428"
						}, {
							gte: 1,
							lt: 10,
							label: "1 - 9 ",
							color: "#ff8c71"
						}, {
							value: 0,
							color: "#ffffff"
						}],
						show: !0
					},
					geo: {
						map: mapName,
						roam: !1,
						scaleLimit: {
							min: 1,
							max: 2
						},
						zoom: 1.35,
						top: 40,
						label: {
							normal: {
								show: !0,
								fontSize: "6",
								color: "rgba(0,0,0,0.7)"
							}
						},
						itemStyle: {
							normal: {
								//shadowBlur: 50,
								//shadowColor: 'rgba(0, 0, 0, 0.2)',
								borderColor: "rgba(0, 0, 0, 0.2)"
							},
							emphasis: {
								areaColor: "#f2d5ad",
								shadowOffsetX: 0,
								shadowOffsetY: 0,
								borderWidth: 0
							}
						}
					},
					series: [{
						name: "扫码量",
						type: "map",
						map: mapName,
						geoIndex: 0,
						data: this.mapData,
						top: '5',
						bottom: '10',
					}]

				};
				myEchartsss.setOption(option);
			})
		}
	}
}
</script>

<style scoped lang="less">
.list .el-col {
	margin-bottom: 20px;
	height: 346px;
}

.list .el-col .el-card {
	height: 100%;
}

.noBoder .el-card__header {
	border-bottom: 0;
	padding: 18px 20px 0px;
}

.box-card .text {
	line-height: 30px;
	font-size: 12px;
	position: relative;
}

.box-card .item font {
	position: absolute;
	right: 5px;
}

.listCard .el-col {
	margin-bottom: 20px;
	height: 250px;
}

.listCard .el-col .el-card {
	height: 100%;
}

.teltie {
	width: 6px;
	height: 20px;
	background: #409EFF;
	margin-right: 6px;
}

.HederLeft {
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 16px;
}

.syzl {
	width: 271px;
	height: 48px;
	background: rgba(64, 158, 255, 0.0600);
	border-radius: 8px 0px 0px 8px;
	border: 1px solid rgba(64, 158, 255, 0.4000);
	color: #409EFF;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.demo-color-box {
	float: left;
	width: 23%;
	padding: 0 20px 0px;
	height: 75px;
	line-height: 24px;
	color: #fff;
	background: #F9F9F9;
	border-radius: 14px;
	margin: 0px 0px 14px 13px;

	.el-col {
		height: 100%;
		color: #606266;
		font-size: 13px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		p {
			color: #303133;
			font-weight: 600;
		}
	}
}

.iconClass {
	font-size: 36px;
	line-height: 36px;
	color: #0076FF;
}

.iconclass1 {
	font-size: 14px;
	line-height: 36px;
	color: #0076FF;
}</style>

